<template>
  <div class="device-view">
    <HeaderView />

    <div class="container">
      <ContentHeaderWithTitle title="分析项目" />
      <div class="device-content">
        <SearchInput placeholder="搜索检测项目" style="margin-top: 0" />
        <ProjectCard />
      </div>
    </div>
    <div class="footer">
      <div class="operate">
        <van-dropdown-menu ref="footerMenuRef" direction="up">
          <van-dropdown-item :style="{ padding: 0 }">
            <template #title>
              <span class="text">已选择 <span class="num">2</span> 项</span>
              <span class="material-symbols-outlined" style="font-size: 16px">
                expand_less
              </span>
            </template>
            <div class="selection-dropdown">
              <div class="title">您选择的待检测项：</div>
              <div class="selections">
                <service-card
                  icon="oil_barrel"
                  name="热解有机碳"
                  org="北京石油地质实验研究中心"
                  style="width: 100%"
                  :showClose="true"
                  @touchstart.stop
                >
                </service-card>
                <service-card
                  icon="oil_barrel"
                  name="热解有机碳"
                  org="北京石油地质实验研究中心"
                  style="width: 100%"
                  :showClose="true"
                >
                </service-card>
              </div>
              <div class="footer">
                <div class="i-text-btn weak">清空全部</div>
              </div>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
        <ButtonView
          size="lg"
          className="btn"
          @touchstart="$router.push('/mobile/sample-register')"
          >我要送检</ButtonView
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SearchInput from './SearchInput.vue'
import ProjectCard from './ProjectCard'
import ButtonView from '@/components/ButtonView.vue'
import HeaderView from '@/components/Layout/HeaderView.vue'
import ContentHeaderWithTitle from '@/components/ContentHeaderWithTitle.vue'
import ServiceCard from '@/components/service-card/ServiceCard.vue'

const footerMenuRef = ref(null)
</script>

<style scoped lang="scss">
.device-view {
  display: flex;
  flex-direction: column;
  height: 100%;

  padding-bottom: dpi(10rem);

  .container {
    flex: 1;
    overflow: hidden auto;

    .device-content {
      margin-top: dpi(-5.5rem);
    }
  }

  > .footer {
    position: fixed;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: dpi(10rem);
    background-color: #f5f5f5;
    box-shadow: 0rem 0rem dpi(5rem) 0rem rgba(0, 0, 0, 0.15);
    .operate {
      display: flex;
      align-items: center;
      height: 100%;

      // 弹出层样式定制
      ::v-deep {
        .van-dropdown-menu {
          height: 100%;
          .van-dropdown-menu__bar {
            height: 100%;
            background: transparent;
            box-shadow: none;

            .van-dropdown-menu__title {
              &::after {
                display: none;
              }
            }
            .van-ellipsis {
              display: flex;
              align-items: center;
              column-gap: 8px;
              height: 100%;
            }
          }
        }
      }
    }
    .text {
      font-family: PingFangSC-Medium;
      font-size: dpi(2rem);
      color: #555555;
      .num {
        color: #0571b0;
      }
    }
    .icon-up {
      margin-right: dpi(2rem);
      margin-left: dpi(2rem);
      font-family: MaterialSymbolsSharp-Medium;
      font-size: dpi(2rem);
      color: #05204d;
    }
  }
}

.btn {
  padding: 0 dpi(5rem);
  height: 100% !important;
}

// 已选项目弹层
.selection-dropdown {
  background: #fff;
  padding: dpi(4rem) dpi(5rem) 0;
  box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.1);
  width: 100%;
  .title {
    font-family: PingFangSC-Semibold;
    font-size: dpi(2.4rem);
    line-height: 24px;
    letter-spacing: 1px;
    color: #555555;
    margin-bottom: dpi(4rem);
  }
  .selections {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }

  .footer {
    height: dpi(8rem);
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
}
</style>
